<template>
  <div>
    <div class="top">
      <el-row>
        <!-- <el-col :span="2" style="width: 108px">
            <div class="block" style="line-height: 48px">
              <div v-if="pic!=''">
                <el-image
                  :src="pic"
                  alt="点击查看大图"
                  class="pic"
                  :preview-src-list="[pic]"
                >
                </el-image>
              </div>
              <div v-else class="pic">
                <p
                  style="text-align: center; color: #cccccc; line-height: 82px"
                >
                  暂无
                </p>
              </div>
            </div>
          </el-col> -->
        <el-col :span="14">
          <el-row>
            <el-col :span="24">
              <div style="display: flex; align-items: center">
                <img
                  style="width: 30px; height: 30px"
                  src="../../../assets/images/myAgent/gongsi.png"
                  alt=""
                />
                <div style="margin-left: 10px">
                  <div
                    class="lf"
                    style="
                      font-weight: 600;
                      font-size: 16px;
                      line-height: 32px;
                      margin-top: 0;
                    "
                  >
                    {{
                      agentInfo.name ? agentInfo.name : '山东汉汇科技有限公司'
                    }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <!--<div style=" width: 228px;float: left;line-height: 26px;">-->
          <!--<span>签约状态：</span>-->
          <!--<span>{{agentInfo.sign}}</span>-->
          <!--</div>-->
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col_boc" :span="24">
          <div style="margin-top: 5px">
            <div style="width: 100%; float: left; line-height: 40px">
              <el-row>
                <el-col :span="2"> <span>代理商全称：</span></el-col>
                <el-col :span="22"
                  ><span class="span_text">{{
                    agentInfo.name ? agentInfo.name : '哇哈哈哈哈'
                  }}</span></el-col
                >
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col_boc" :span="24">
          <div style="margin-top: 5px">
            <div style="width: 100%; float: left; line-height: 40px">
              <el-row>
                <el-col :span="2"> <span>代理商等级：</span></el-col>
                <el-col :span="22"
                  ><span class="span_text">一级代理</span></el-col
                >
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col_boc" :span="24">
          <div style="width: 100%; float: left; line-height: 40px">
            <el-row>
              <el-col :span="2"><span>手机号：</span></el-col>
              <el-col :span="22">
                <span class="span_text">{{
                  agentInfo.phone ? agentInfo.phone : '18565252525'
                }}</span></el-col
              >
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col_boc" :span="24">
          <div style="width: 100%; float: left; line-height: 40px">
            <el-row>
              <el-col class="col_text" :span="2"
                ><span>生效方式：</span></el-col
              >
              <el-col :span="22">
                <span class="span_text">{{
                  agentInfo.truedate ? agentInfo.truedate : '永久有效'
                }}</span></el-col
              >
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col_boc" :span="24">
          <div style="width: 100%; float: left; line-height: 40px">
            <el-row>
              <el-col :span="2"><span>创建时间：</span></el-col>
              <el-col :span="22">
                <span class="span_text">{{
                  agentInfo.time ? agentInfo.time : '2023 - 10 - 26 - 5 - 30'
                }}</span></el-col
              >
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="button">
      <el-tabs
        style="margin-top: 40px"
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="基本信息" name="1">
          <div style="padding: 10px 0 10px 20px">
            <!--                                        <div style="padding: 6px;">-->
            <!--                                            <span class="basic">代理商等级：</span>-->
            <!--                                            <span>{{agentInfo.groupTypeName ? agentInfo.groupTypeName : '&#45;&#45;'}}</span>-->
            <!--                                        </div>-->
            <div style="padding: 6px" v-if="agentInfo.group_type == 2">
              <span class="basic">代理全称：</span>
              <span class="basic_text">{{
                agentInfo.prevname ? agentInfo.prevname : '--'
              }}</span>
            </div>
            <div style="padding: 6px">
              <span class="basic">代理姓名：</span>
              <span>张婷</span>
            </div>
            <div style="padding: 6px">
              <span class="basic"> 手机号：</span>
              <span> 13725786254</span>
            </div>
            <div style="padding: 6px">
              <span class="basic">代理等级：</span>
              <span>{{
                agentInfo.groupTypeName ? agentInfo.groupTypeName : '--'
              }}</span>
            </div>
            <div style="padding: 6px">
              <span class="basic">归属上级：</span>
              <span>{{ agentInfo.prevname ? agentInfo.prevname : '--' }}</span>
            </div>
            <div style="padding: 6px">
              <span class="basic">代理状态：</span>
              <span>正常</span>
            </div>
            <div style="padding: 6px">
              <span class="basic">地址信息：</span>
              <span>{{
                agentInfo.addressDet ? agentInfo.addressDet : '--'
              }}</span>
            </div>
            <!-- <div style="padding: 6px">
              <span class="basic">详细地址：</span>
              <span>{{
                agentInfo.address_more ? agentInfo.address_more : '--'
              }}</span>
            </div> -->
            <div style="padding: 6px">
              <span class="basic">生效方式：</span>
              <span>永久有效</span>
            </div>
            <div style="padding: 6px">
              <span class="basic">添加时间：</span>
              <span>{{ agentInfo.addTime ? agentInfo.addTime : '--' }}</span>
            </div>
            <!-- <div style="padding: 6px">
              <span class="basic">备注：</span>
              <span>{{ agentInfo.text ? agentInfo.text : '--' }}</span>
            </div> -->
          </div>
          <!--<template>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div style="padding: 16px;">
                                    <div class="clearfix tabtop">
                                        <span style="border-left: 4px #409EFF solid;padding-left: 10px;">基本信息</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="padding: 16px;">
                                    <div class="clearfix tabtop">
                                        <span style="border-left: 4px #409EFF solid;padding-left: 10px;">提现信息</span>
                                    </div>
                                    <div style="padding: 10px;">
                                        <div style="padding: 6px;">
                                            <span class="basic">持卡人：</span>
                                            <span>{{agentInfo.bank_card_holder?agentInfo.bank_card_holder:'&#45;&#45;'}}</span>
                                        </div>
                                        <div style="padding: 6px;">
                                            <span class="basic">身份证号：</span>
                                            <span>{{agentInfo.id_card_number?agentInfo.id_card_number:'&#45;&#45;'}}</span>
                                        </div>
                                        <div style="padding: 6px;">
                                            <span class="basic">提现银行：</span>
                                            <span>{{agentInfo.bankName?agentInfo.bankName:'&#45;&#45;'}}</span>
                                        </div>
                                        <div style="padding: 6px;">
                                            <span class="basic">银行卡号：</span>
                                            <span>{{agentInfo.bank_card_number?agentInfo.bank_card_number:'&#45;&#45;'}}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <div style="padding: 16px;">
                                    <div class="clearfix tabtop">
                                        <span style="border-left: 4px #409EFF solid;padding-left: 10px;">证件信息</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </template>-->
        </el-tab-pane>
        <el-tab-pane label="结算成本" name="2">
          <template>
            <el-table :data="agentInfo.rateArray" style="width: 100%">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="passageway" label="渠道名称" width="180">
              </el-table-column>
              <el-table-column prop="ali_rate" label="支付宝费率">
              </el-table-column>
              <el-table-column prop="wx_rate" label="微信费率">
              </el-table-column>
              <el-table-column prop="ysf_rate" label="云闪付费率">
              </el-table-column>
            </el-table>
          </template>

          <!-- <template>
            <el-form
              ref="tableData"
              label-width="120px"
              style="width: 100%"
              size="large"
            >
              <div v-if="agentInfo.rateArray!=''"> -->
          <!--<el-form-item label="支付通道：">-->
          <!--</el-form-item>-->
          <!-- <div style="width: 100%; line-height: 26px; padding-left: 20px">
                  <span>支付通道：</span>
                </div>
                <el-card
                  class="box-card"
                  style="float: left; margin: 20px"
                  v-for="(item,index) in agentInfo.rateArray"
                >
                  <div slot="header" class="clearfix">
                    <span>{{ item.passageway }}</span>
                  </div>
                  <el-form-item label="支付宝费率">
                    <el-col :span="12">
                      <div class="rate-show">
                        <p>{{ item.ali_rate }}</p>
                      </div>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="微信费率">
                    <el-col :span="12">
                      <div class="rate-show">
                        <p>{{ item.wx_rate }}</p>
                      </div>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="云闪付费率">
                    <el-col :span="12">
                      <div class="rate-show">
                        <p>{{ item.ysf_rate }}</p>
                      </div>
                    </el-col>
                  </el-form-item>
                </el-card>
              </div>
              <div style="min-height: 248px" v-else>
                <div style="text-align: center; margin-top: 50px">
                  暂无通道信息！
                </div>
              </div>
            </el-form>
          </template> -->
        </el-tab-pane>
        <el-tab-pane label="结算账户" name="4">
          <div style="padding: 10px 0 10px 20px">
            <!--                                        <div style="padding: 6px;">-->
            <!--                                            <span class="basic">代理商等级：</span>-->
            <!--                                            <span>{{agentInfo.groupTypeName ? agentInfo.groupTypeName : '&#45;&#45;'}}</span>-->
            <!--                                        </div>-->
            <div style="padding: 6px">
              <span class="zHdata" style="font-weight: 400; color: #545353"
                >结算类型：</span
              >
              <span>
                <template>
                  <el-radio v-model="radio" disabled label="1"
                    >对公账户</el-radio
                  >
                  <el-radio v-model="radio" disabled label="2"
                    >对私账户</el-radio
                  >
                </template>
              </span>
            </div>
            <div v-if="radio == 1">
              <div style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353">
                  银行名称：
                </span>
                <span>中国工商银行</span>
              </div>
              <div style="padding: 6px">
                <span
                  class="zHdata"
                  style="font-weight: 400; color: #545353;marging"
                  >开户行名称：</span
                >
                <span>中国工商银行</span>
              </div>
              <div style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353">
                  账号户名:
                </span>
                <span> 北京当代培训机构有限公司</span>
              </div>
              <div style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353"
                  >公户账号:
                </span>
                <span> 6221551283396987844</span>
              </div>
              <div class="img_box" style="padding: 6px">
                <span
                  class="zHdata"
                  style="margin-right: 10px; font-weight: 400; color: #545353"
                  >营业执照：
                </span>
                <span style="margin-bottom: 20px;display">
                  <el-image
                    :preview-src-list="srcList"
                    style="width: 100px; height: 100px"
                    src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
                    fit="contain"
                  ></el-image>
                </span>
              </div>
            </div>
            <div v-else>
              <div style="padding: 6px">
                <span
                  class="zHdata"
                  style="font-weight: 400; color: #545353;marging"
                  >银行名称：</span
                >
                <span>中国工商银行</span>
              </div>
              <div style="padding: 6px">
                <span
                  class="zHdata"
                  style="font-weight: 400; color: #545353;marging"
                  >开户行名称：</span
                >
                <span>中国工商银行支行</span>
              </div>
              <div style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353">
                  账号户名:
                </span>
                <span> 北京当代培训机构有限公司</span>
              </div>
              <div style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353">
                  预留手机号:
                </span>
                <span> 北京当代培训机构有限公司</span>
              </div>
              <div style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353"
                  >银行账号:
                </span>
                <span> 6221551283396987844</span>
              </div>
              <div style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353"
                  >身份账号:
                </span>
                <span> 330723190504215508</span>
              </div>
              <div class="img_box" style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353"
                  >身份证：
                </span>
                <span style="margin-bottom: 20px;display">
                  <el-image
                    :preview-src-list="srcList"
                    style="width: 150px; height: 100px"
                    src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
                    fit="contain"
                  ></el-image>
                </span>
                <div style="width: 20px"></div>
                <span style="margin-bottom: 20px;display">
                  <el-image
                    :preview-src-list="srcList"
                    style="width: 150px; height: 100px"
                    src="https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
                    fit="contain"
                  ></el-image>
                </span>
              </div>
              <div class="img_box" style="padding: 6px">
                <span class="zHdata" style="font-weight: 400; color: #545353"
                  >银行卡：
                </span>
                <span style="margin-bottom: 20px;display">
                  <el-image
                    :preview-src-list="srcList"
                    style="width: 150px; height: 100px"
                    src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
                    fit="contain"
                  ></el-image>
                </span>
              </div>
            </div>
          </div>
          <div style="height: 60px"></div>
        </el-tab-pane>
        <el-tab-pane label="平台权限" name="3">
          <div style="padding: 10px 0 10px 20px">
            <el-tree
              disabled="true"
              :data="dataThree"
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[2, 3]"
            >
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      id: '',
      MerchentInfo: [], //商户列表
      agentInfo: [],
      pic: '',
      loading: false, //加载

      activeName: '1',
      page: 1,
      limit: 10,
      total: 0,
      radio: '2',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      dataThree: [
        {
          label: '首页',
          id: 1,
          children: [
            {
              label: '代理商列表',
              children: [
                {
                  label: '添加代理'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '学校管理',
          children: [
            {
              label: '学校列表',
              children: [
                {
                  label: '添加学校'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          id: 3,
          label: '设备管理',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    //查看大图
    See () {
      layer.photos({
        photos: '#agentdetails'
      })
    },

    // Edit (id) {
    //   //编辑
    //   var _this = this
    //   location.hash = '/Agent/addlist/id=' + id
    // },

    // //订单跳转详情页
    // //跳转详情页
    // seeDeails (id) {
    //   window.open('#/Merchant/merchantinfocat/id=' + id)
    //   // location.hash = "/Agentmerchant/merchantinfocat/id="+id
    // },
    // seeBalangeLog (id) {
    //   window.open('#/Agent/balancelog/id=' + id)
    //   // location.hash = "/Agentmerchant/merchantinfocat/id="+id
    // },

    //获取代理商下的商户列表
    getMerchantInfo () {
      var vm = this
      vm.loading = true
      var id = vm.id
    },

    // tab切换
    handleClick () {
      var vm = this
      if (vm.activeName == 3) {
        vm.getMerchantInfo() //商户列表
      }
    },

    getData () {
      var vm = this
      vm.loading = true
      var id = vm.id
      console.log('请求的参数', id)
      if (id != '') {
        $.ajax({
          url: "{:url('getAgentInfo')}",
          data: { id: id },
          type: 'post',
          success: function (res) {
            vm.agentInfo = res.data
            vm.pic = res.data.imgInfo ? res.data.imgInfo : ''
            vm.loading = false
          }
        })
      }
    },

    size_change (val) {
      this.limit = val
      this.page = 1
      this.getMerchantInfo()
    },
    /* 切换页数 */
    current_change (val) {
      this.page = val
      this.getMerchantInfo()
    }
  }
}
</script>

<style scoped>
.zHdata {
  display: inline-block;
  width: 96px;
  height: 25px;
}
.img_box {
  display: flex;
}
.basic_text {
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #2e2d2d;
}
.col_boc {
  height: 40px;
}
.top {
  padding: 40px 0 0 30px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #4b4b4b;
  line-height: 22px;
}
.lf {
  float: left;
  margin-bottom: 0px !important;
}
.basic {
  color: #999999;
}
.pic {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px #e5e5e5 solid;
}
.xiangqing {
  margin-top: 20px;
  background: #f8f8f8;
  padding: 16px;
  /*min-width: 1200px;*/
  /*text-align: center;*/
}
.tabtop {
  height: 30px;
  border-bottom: 1px #c4c8d0 solid;
}
.time {
  display: flex;
  align-items: center;
  height: 50px;
}

.Dtime {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.search_block {
  margin-right: 16px;
  margin-bottom: 10px;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #f2f2f2;
  margin-bottom: 20px;
}

.order_data {
  display: flex;
  justify-content: space-between;
}

.details {
  width: 50%;
  display: flex;
  font-size: 14px;
}

.details_img {
  width: 60px;
  margin-right: 10px;
}

.details_text {
  font-size: 14px;
}

.Cells {
  width: 10%;
  text-align: center;
}

.content {
  /*height: 80px;*/
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.buttoms {
  width: 100%;
  height: 50px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.zan {
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.leftLine {
  height: 24px;
  line-height: 24px;
  padding-left: 5px;
  margin-bottom: 20px;
}
.Simg {
  cursor: pointer;
  border: 1px dashed rgb(204, 204, 204);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.wh-col {
  width: 164px;
  height: 198px;
}
.lf {
  float: left;
}
.basic {
  color: #999999;
}
.pic {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px #e5e5e5 solid;
}

.tabtop {
  height: 30px;
  border-bottom: 1px #c4c8d0 solid;
}
.no_meal {
  border: 1px #ccc solid;
  height: 100%;
  color: #ccc;
  text-align: center;
  line-height: 74px;
}
.image {
  display: block;
}
.imgtitle {
  padding: 0 14px 14px 14px;
  text-align: center;
}
.wh-col {
  width: 164px;
  height: 198px;
}
.imgtitle {
  padding: 0 14px 14px 14px;
  text-align: center;
}
.no_meal {
  border: 1px #dcdfe6 solid;
  height: 100%;
  color: #ccc;
  border-radius: 5px;
  text-align: center;
  line-height: 74px;
}
.rate-show {
  border: 1px #dcdfe6 solid;
  width: 148px;
  color: #999999;
  padding-left: 10px;
  border-radius: 5px;
  line-height: 32px;
  margin-top: 4px;
}
.el-card__header {
  padding: 12px 20px;
}
.span_text {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #e1e1e1;
}
</style>
